<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../project/css/project.css">
    <link rel="stylesheet" href="../../editor-app/libs/bootstrap_3.1.1/css/bootstrap.css">
    <link rel="stylesheet" href="./css/jquery.json-viewer.css">
</head>
<body>
<script>
html,body{background-color: whitesmoke}
.layui-fluid{margin-top: 15px;}
.content{min-height: 796px;}
.nav{text-align: center;}
.nav button{margin-bottom: 3px;width: 100%;margin-top: 3px;margin-bottom: 3px;border-radius: 1px;}
.nav button:hover{background-color: #5FB878;border: 1px solid #5FB878;color: white;}
.layui-card-body .layui-btn+.layui-btn{margin-left: 0px;}
.code-show{min-height: 454px;}
.js-show{min-height: 200px;}

</script>
<div style="padding-left:20px; color:red">待完成内容：json格式化后，复制的时候需要带空格。</div>
<br>
<br>

<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md5">
            <div>
                <textarea class="form-control" id="json-input" rows="20" placeholder="输入示例代码"></textarea>
            </div>
        </div>
        <div class="layui-col-md1">
            <div>
                <div style="">
                    <label class="checkbox-inline">
                        <input type="checkbox" id="collapsed" onchange="jsonFormat()">收缩所有的节点
                    </label>
                </div>
                <div style="padding-top: 20px">
                    <label class="checkbox-inline">
                        <input type="checkbox" id="with-quotes" checked="checked" onchange="jsonFormat()">为Key添加双引号
                    </label>
                </div>
                <div style="padding-top: 20px">
                    <button id="btn-json-viewer" onclick="jsonFormat()" class="btn btn-info">格式化</button>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <pre id="json-renderer"></pre>
        </div>
    </div>
</div>


<div class="container"  style="margin-top: 1em;">
    <div class="row">




    </div>
</div>

<script type="text/javascript" src="../../admin/js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.json-viewer.js"></script>

<script>

    function jsonFormat() {
        try {
            var input = eval('(' + $('#json-input').val() + ')');
        } catch (error) {
            return alert("Cannot eval JSON: " + error);
        }
        var options = {
            collapsed: $('#collapsed').is(':checked'),
            withQuotes: $('#with-quotes').is(':checked')
        };
        $('#json-renderer').jsonViewer(input, options);
    }

</script>

</body>
</html>
